<script lang="ts" setup>
import { apiDrawCoinList, DrawCoinList } from "@@/api/module/drawCoin";
import { omitText } from "@@/utils/tools/project";
import { TagEmun } from "@@/components/tag";
import { formatNumber } from "@@/utils/tools/tools";
import dayjs from "dayjs";
import useBalanceStore from "@@/store/useBalanceStore";
import globalEnum from "@@/hooks/globalEnum";
const balanceStore = useBalanceStore();
const { coinEnum } = storeToRefs(balanceStore);

function getCoinEnum(): TagEmun {
  return coinEnum.value.map((val) => {
    return {
      text: val.code,
      value: val.id,
      style: {
        backgroundColor:
          globalEnum.coinColor[val.code as keyof typeof globalEnum.coinColor],
      },
    };
  });
}
</script>

<template>
  <PagingList min-height="40vh" sticky="sticky" :api="apiDrawCoinList">
    <template #header>
      <div class="list-layout">
        <h4>{{ $t("ri-qi") }}</h4>
        <h4>{{ $t("ha-xi") }}</h4>
        <h4>{{ $t("shu-liang") }}</h4>
      </div>
    </template>
    <template #item="{ item }: { item: DrawCoinList.ResItem }">
      <div class="T-S-sm list_item list-layout">
        <div>{{ dayjs(item.created_at).format("YYYY-MM-DD") }}</div>
        <CopyText :copy-text="item.txid">{{ omitText(item.txid) }}</CopyText>
        <div>{{ formatNumber(item.number) }}</div>
        <div>{{ dayjs(item.created_at).format("HH:mm:ss") }}</div>
        <div></div>
        <Tag :enum="getCoinEnum()" :value="item.coin_id" />
      </div>
    </template>
  </PagingList>
</template>

<style lang="less" scoped>
.list_item {
  padding: var(--gap-md) 0;
  border-bottom: solid 2rem var(--C-O5);
}
</style>
